iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 6
0
自我挑戰組

小小前端轉職去系列 第 6

Html body 實作篇 -Brackets

  • 分享至 

  • xImage
  •  

英國研究指出 不是
是英國BCC是個老牌新聞網 架構也很少換 所以適合拿來複製教學
一步一步來 首先 他的nav導航欄 脖子nav 長這樣

https://ithelp.ithome.com.tw/upload/images/20181005/20098345iENkfgAohE.png
首先 我們用個大盒子把前三行包起來 ,用盒子才能知道盒子的高度跟大小
裡面 在給他三個小盒子 也就是那分別的三列 開頭為 bbc news 跟紅色列home

#container

#是給予div一個id的意思
(這裡說明一下 id有為一性 class沒有,如果你有很多個重覆性質的東西 譬如手要紅色 腳也要紅色 就可以用class="red" 放在不同的div上)
按下tab

<div id="container">

</div>

大盒子出現
第一個小盒子就叫他topbar

<div id="container">
#topbar
</div>

按下tab 第一行的架構產生了

<div id="container">
 <div id="topbar"></div>
</div>

接著要把topbar分成五個小盒子處理
https://ithelp.ithome.com.tw/upload/images/20181005/20098345fTMKFrLlkO.png
這樣才能對功能做設定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
    <title>iT邦幫眾</title>
</head>

<body>


    <div id="container">
        <div id="topbar">
            <div id="bbclogo"> 
            
            </div>
            <div id="signin">
                
            </div>
            <div id="topmenu">
               
            </div>
            <div id="more">
                
            </div>
            <div id="Search">
                
            </div>
        </div>


    </div>

</body>
</html>

今天處理完的結果會變這樣 分別為bbclogo signin topmenu more Search


上一篇
Html head 實作篇 -Brackets
下一篇
Html Body-2 (快捷輸入) 實作篇 -Bracket
系列文
小小前端轉職去11
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言